<template>

  <!--  添加按钮-->
  <div class="fab-container" @click="go_addtalk">
    <button class="floating-action-button">
      <van-icon name="edit" />
    </button>
  </div>
  <div class="yrcg">
    <div class="yrcg_title">
      <span class="yrcg_span" @click="scrollToTarget1">{{ yrcg }}</span>
<!--      <span class="yrcg_more" @click="scrollToTarget">学院事件</span>-->
    </div>

  </div>
  <div class="achievement-container">
    <div  class="achievement-item" ref="yrcgl">
      <div class="yrcg_list" v-for="item in achievements" :key="item.articleId" @click="yrcg_list(item)">
        <div class="yrcg_list_top_img">
          <img :src="item.articleImage" alt="achievement" class="achievement-image" />
        </div>
        <div class="yrcg_list_dowm_nr">
          <h3 class="yrcg_list_title">{{ limitText(item.title, 8) }}</h3>
          <p class="yrcg_list_nr">{{ limitText(item.content, 26) }}</p>
          <div class="author-date">
            <span>{{ item.teacherName }}</span>
            <span>{{ formatDate(item.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>

<!--    <div class="xysj" ref="xxsjl">-->
<!--      <span class="xycg_title">{{ xycg_title }}</span>-->
<!--      <hr/>-->
<!--      <ul v-for="item in xysj_list" :key="item.id">-->
<!--        <li>-->
<!--          <h4 class="xysj_nr_title">{{ item.title }}</h4>-->
<!--          <span class="xysj_nr_nr">{{ item.nr }}</span>-->
<!--        </li>-->
<!--        <div class="fg"></div>-->
<!--      </ul>-->
<!--    </div>-->

    <div class="none_nr_down">
      暂无更多数据
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {getEducationAchievementRequestArticleUsingPost} from "../../Api/yurenchengguomokuai.js";
import { useTeachingPostStore } from "../../Store/modules/YRCG/EducationalAchievementArticle.js"
import router from "../../Router/index.js";
import { useTeachingPostCommentStore } from "../../Store/modules/YRCG/TeachingPostComment"
import {getCommentsByPostIdUsingGet} from "../../Api/pinglunmokuai.js";
import {showDialog} from "vant";

// const xycg_title = ref("学院事件")
const achievements = ref([]);
const yrcg = ref("成果展示")

// const xysj_list = ref([
//   {
//     id: 1,
//     title: '无意者烈火焚身;以正义的烈火拔出黑暗。我...',
//     nr: '折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结!真正的恩典因不...'
//   },
//   {
//     id: 2,
//     title: '无意者烈火焚身;以正义的烈火拔出黑暗。我...',
//     nr: '折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结!真正的恩典因不...'
//   }
//
//   // 更多育人成果数据...
// ]);

// 使用 ref 来引用目标元素
const xxsjl = ref(null);

// 定义方法，点击按钮时调用
// function scrollToTarget() {
//   if (xxsjl.value) {
//     xxsjl.value.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到目标位置
//   }
// }

// 使用 ref 来引用目标元素
const yrcgl = ref(null);

// 定义方法，点击按钮时调用
// function scrollToTarget1() {
//   if (yrcgl.value) {
//     yrcgl.value.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动到目标位置
//   }
// }

async function getYRCGList() {
  try {
    const response = await getEducationAchievementRequestArticleUsingPost({
      page: 1
    })
    // console.log(response.data.data)
    achievements.value = response.data.data

  }catch (err){
    console.log(err)
  }
}

// 定义日期格式化方法
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toISOString().split('T')[0]; // 提取日期部分
}

// 定义限制字数的方法
function limitText(text, limit) {
  if (!text) return '';
  if (text.length <= limit) return text; // 如果文本长度小于等于限制长度，直接返回
  return text.slice(0, limit) + '...'; // 截取指定长度并添加省略号
}


function go_addtalk(){
  router.push("/addyrcg")
}

onMounted(() => {
  getYRCGList();
});


const EducationalAchievementArticleStore = useTeachingPostStore();

function yrcg_list(ArticleStore){
  // alert("这篇文章的id码是:" + articleId)
  EducationalAchievementArticleStore.fetchArticleDetail = ArticleStore;
  router.push('/YRCGXQView')
}
</script>

<style scoped>
.achievement-container {
  height: 480px; /* 根据需要设置固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  padding: 10px; /* 内边距 */
}
.achievement-item {
  display: inline-block;
  flex-direction: column; /* 垂直排列内容 */
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.yrcg{
  margin-top: 10px;
  width: 100%;
}
.yrcg_title{
  overflow: hidden;
  padding: 10px;
  line-height: 13px;
}
.yrcg_span{
  font-size: 18px;
  color: #682757;
  float: left;
}
.yrcg_more{
  font-size: 18px;
  color: #682757;
  float: right;

}
.achievement-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-right: 10px;
}
.author-date {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
}
.yrcg_list_title{
  font-size: 14px;
  margin: 0;
}
.yrcg_list_nr{
  font-size: 10px;
  margin: 4px 0;
}
.yrcg_list{
  width: 45%;
  margin: 3px 8px;
  display: inline-block;
}
.xycg_title{
  color: #682757;
}
.fg{
  width: 100%;
  height: 0;
  border: 0.5px solid gray;
}
.xysj_nr_title{
  margin: 3px;
}
.xysj_nr_nr{
  font-size: 13px;
  margin: 3px;
  color: grey;
}
.none_nr_down{
  text-align: center;
  color: gray;
  //margin-top: -30px;
  font-size: 13px;
}
.fab-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1000;
}

.floating-action-button {
//background-color: rgba(104, 39, 87, 0.8);
  border: none;
  background-color: rgb(147,26,106);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  transition: all 0.3s ease-in-out;
  color: #f9f9f9;
}

.floating-action-button:hover {
  transform: scale(1.2);
}
</style>
